<template>
    <ARow :gutter="24">
        <ACol :span="6">
            <ACard title="树形组件">
                <VTreeSelect :data="treeData" :defaultExpandedKeys="[11]" />
            </ACard>
        </ACol>
        <ACol :span="18">
            <VTreeSearch v-model="selectKeys" :treeData="treeData" />
        </ACol>
    </ARow>
</template>

<script>
const treeData = [
    {
        name: "父级1",
        id: 1,
        children: [
            {
                name: "0-0-0",
                id: 11,
                children: [
                    { name: "0-0-0-0", id: 12 },
                    { name: "0-0-0-1", id: 13 },
                    { name: "0-0-0-2", id: 14 },
                ],
            },
            {
                name: "0-0-1",
                id: 121,
                children: [
                    { name: "0-0-1-0", id: 122 },
                    { name: "0-0-1-1", id: 123 },
                    { name: "0-0-1-2", id: 124 },
                ],
            },
            {
                name: "0-0-2",
                id: 131,
            },
        ],
    },
    {
        name: "父级2",
        id: 2,
        children: [
            { name: "0-1-0-0", id: 21 },
            { name: "0-1-0-1", id: 22 },
            { name: "0-1-0-2", id: 23},
        ],
    },
    {
        name: "父级3",
        id: 3,
    },
];
export default {
    data() {
        return {
            treeData,
            selectKeys: [11]
        };
    },
    methods: {}
};
</script>

<style></style>
